<template>
  <div class="map-fly-lines-container">
    <v-chart class="chart" :option="option" autoresize />
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import * as echarts from "echarts";
// 引入vue-echarts
import VChart from "vue-echarts";
import chinaMap from "@/assets/map/china.json";

echarts.registerMap("china", { geoJSON: chinaMap });
const layoutCenter = ["40%", "55%"];
const layoutSize = "100%";
// const imgtx = require("@/assets/images/card-lv.png.png");
export default {
  name: "MapFlyLines",
  components: { VChart },
  data() {
    return {
      // 钦州港经纬度坐标
      qinzhouPortCoords: [107.6195447926658, 22.47276309782437],
      // 目标点位数据 - 经纬度坐标（百色地区及云南、贵州相关城市）
      zbarr: [
        [106.6172, 23.9024], // 百色
        [106.7994, 23.3253], // 百色德保
        [107.1292, 23.6316], // 百色田东
        [107.5836, 23.3287], // 百色平果
        [102.8285, 23.6158], // 云南建水
        [107.4321, 22.4167], // 崇左渠旧
        [104.8955, 25.0940], // 贵州兴义
        [107.5172, 26.6989], // 贵州福泉
        [103.1979, 24.8967], // 云南七甸
        [102.4789, 24.9384], // 云南安宁
      ],
      // // 中间点数组 - 可以是二维或三维数组
      zhongdianarr: [
        // [116.4551, 40.2539], // 北京
        // [123.1238, 42.1216], // 辽宁
        // [
        //   [87.3614369677864, 40.51581856432106],
        //   [86.59168717522743, 31.36579248898159],
        // ], // 辽宁
        [
          [121.29510245764232, 38.45339416029412],
          [123.02430252887302, 30.913416584606136],
          [120.83360122979343, 26.115787275187074],
          [116.70330447956553, 22.267323741676766],
        ],
      ],
      // 渤海湾终点坐标
      bohaiwanCoords: [121.29510245764232, 38.45339416029412],
      // 渤海湾起点数组（黄骅港、天津港、曹妃甸）
      bohaiwanStartPoints: [
        [117.8586, 38.3785], // 黄骅港
        [117.7208, 38.9919], // 天津港
        [118.2998, 38.9278], // 曹妃甸
      ],
      // 新增飞线起始坐标
      newFlyLineStart: [106.72562371885238, 14.084513852701301], // 新飞线起点
      // 飞线颜色配置
      flyLineColors: {
        qinzhou: "#00eaff", // 钦州港飞线颜色（青色）
        zhongdian: "#ff6b35", // 中间点飞线颜色（橙色）
        bohaiwan: "#ffeb3b", // 渤海湾飞线颜色（黄色）
        newFlyLine: "#ffeb3b", // 新增飞线颜色（黄色，与渤海湾一致）
      },
      option: {
        backgroundColor: "transparent",
        silent: true, // 禁用所有交互事件
        geo: {
          map: "china",
          aspectScale: 0.85,
          layoutCenter: layoutCenter, // 地图位置
          layoutSize: layoutSize,
          silent: true, // 禁用geo区域的交互事件
          itemStyle: {
            normal: {
              shadowColor: "#276fce",
              shadowOffsetX: 0,
              shadowOffsetY: 15,
              opacity: 0.5,
            },
            emphasis: {
              areaColor: "#276fce",
            },
          },
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                areaColor: "rgba(0, 10, 52, 1)",
                borderColor: "rgba(0, 10, 52, 1)",
                normal: {
                  opacity: 0,
                  label: {
                    show: false,
                    color: "#009cc9",
                  },
                },
              },
              label: {
                show: false,
                color: "#FFFFFF",
                fontSize: this.$utils.transformFontSize(12),
              },
            },
          ],
        },
        series: [],
      },
    };
  },
  computed: {},
  mounted() {
    this.setSer();
  },
  methods: {
    setSer() {
      const self = this;
      var series = [];
      // const imgtx = ;
      series.push(
        {
          // ==================== 地图底图系列 ====================
          type: "map", // 图表类型：地图
          mapType: "china", // 地图类型：中国地图
          aspectScale: 0.85, // 地图长宽比缩放
          layoutCenter: layoutCenter, // 地图在容器中的位置居中
          layoutSize: layoutSize, // 地图大小
          zoom: 1, // 当前视角的缩放比例
          silent: true, // 禁用地图系列的交互事件（点击、悬停等）
          // roam: true, //是否开启平游或缩放（已禁用）
          scaleLimit: {
            // 滚轮缩放的极限控制
            min: 1, // 最小缩放比例
            max: 2, // 最大缩放比例
          },
          itemStyle: {
            normal: {
              areaColor: "#12235c", // 区域填充颜色（深蓝色）
              borderColor: "#2ab8ff", // 边界线颜色（亮蓝色）
              borderWidth: 0.5, // 边界线宽度
              shadowColor: "rgba(0,54,255, 0.4)", // 阴影颜色
              shadowBlur: 100, // 阴影模糊度
            },
            emphasis: {
              areaColor: "#02102b", // 鼠标悬停时区域颜色（更深蓝色）
              label: {
                color: "#fff", // 鼠标悬停时文字颜色
              },
            },
          },
          // 显示省份名称配置
          label: {
            show: true, // 显示省份名称
            color: "#fff", // 文字颜色（白色）
            fontSize: self.$utils.transformFontSize(10), // 正常字体大小
            emphasis: {
              color: "#fff", // 鼠标悬停时文字颜色
              fontSize: self.$utils.transformFontSize(12), // 鼠标悬停时字体大小
            },
          },
        },
        {
          // ==================== 钦州港飞线系列 ====================
          type: "lines", // 图表类型：飞线
          zlevel: 2, // 图层层级（数值越大层级越高）
          silent: true, // 禁用飞线系列的交互事件
          effect: {
            // 飞线动画效果配置
            show: true, // 显示动画效果
            period: 3, // 动画周期时间（秒），值越小速度越快
            trailLength: 0.02, // 特效尾迹长度[0,1]，值越大尾迹越长
            symbol: "arrow", // 尾迹符号类型：箭头
            symbolSize: 5, // 箭头图标大小
          },
          lineStyle: {
            normal: {
              color: self.flyLineColors.qinzhou, // 飞线颜色（青色）
              width: 1, // 飞线宽度
              opacity: 0.7, // 飞线透明度
              curveness: 0.3, // 飞线曲率（0为直线，值越大越弯曲）
            },
          },
          data: self.convertData(), // 飞线数据：钦州港到各省份
        },
        {
          // ==================== 中间点飞线系列 ====================
          type: "lines", // 图表类型：飞线
          zlevel: 2, // 图层层级
          silent: true, // 禁用中间点飞线系列的交互事件
          effect: {
            // 飞线动画效果配置
            show: true, // 显示动画效果
            period: 4, // 动画周期时间（秒），比钦州港飞线稍慢
            trailLength: 0.02, // 特效尾迹长度[0,1]
            symbol: "arrow", // 尾迹符号类型：箭头
            symbolSize: 6, // 箭头图标大小（比钦州港飞线稍大）
          },
          lineStyle: {
            normal: {
              color: self.flyLineColors.zhongdian, // 飞线颜色（橙色）
              width: 2, // 飞线宽度（比钦州港飞线粗）
              opacity: 0.8, // 飞线透明度
              curveness: 0.1, // 飞线曲率（比钦州港飞线稍直）
            },
          },
          data: self.convertZhongdianData(), // 飞线数据：中间点到钦州港
        },
        {
          // ==================== 渤海湾飞线系列 ====================
          type: "lines", // 图表类型：飞线
          zlevel: 2, // 图层层级
          silent: true, // 禁用渤海湾飞线系列的交互事件
          effect: {
            // 飞线动画效果配置
            show: true, // 显示动画效果
            period: 5, // 动画周期时间（秒），最慢的飞线
            trailLength: 0.02, // 特效尾迹长度[0,1]
            symbol: "arrow", // 尾迹符号类型：箭头
            symbolSize: 7, // 箭头图标大小（最大的箭头）
          },
          lineStyle: {
            normal: {
              color: self.flyLineColors.bohaiwan, // 飞线颜色（黄色）
              width: 2, // 飞线宽度
              opacity: 0.9, // 飞线透明度（最不透明）
              curveness: 0.2, // 飞线曲率（与中间点飞线相同）
            },
          },
          data: self.convertBohaiwanData(), // 飞线数据：起点到渤海湾
        },
        {
          // ==================== 新增飞线系列 ====================
          type: "lines", // 图表类型：飞线
          zlevel: 2, // 图层层级
          silent: true, // 禁用交互事件
          effect: {
            // 飞线动画效果配置
            show: true, // 显示动画效果
            period: 5, // 动画周期时间（秒），与渤海湾飞线一致
            trailLength: 0.02, // 特效尾迹长度[0,1]
            symbol: "arrow", // 尾迹符号类型：箭头
            symbolSize: 7, // 箭头图标大小，与渤海湾飞线一致
          },
          lineStyle: {
            normal: {
              color: self.flyLineColors.newFlyLine, // 飞线颜色（黄色），与渤海湾飞线颜色一致
              width: 2, // 飞线宽度，与渤海湾飞线一致
              opacity: 0.9, // 飞线透明度，与渤海湾飞线一致
              curveness: 0.2, // 飞线曲率，与渤海湾飞线一致
            },
          },
          data: self.convertNewFlyLineData(), // 飞线数据：新起点到钦州港
        },
        {
          // ==================== 渤海湾起点散点系列 ====================
          type: "effectScatter", // 图表类型：带涟漪效果的散点图
          coordinateSystem: "geo", // 坐标系：地理坐标系
          zlevel: 2, // 图层层级
          silent: true, // 禁用渤海湾起点散点系列的交互事件
          rippleEffect: {
            // 涟漪特效配置
            period: 4, // 涟漪动画周期（秒），值越小速度越快
            brushType: "stroke", // 波纹绘制方式：stroke（描边）或 fill（填充）
            scale: 4, // 波纹圆环最大缩放比例，值越大波纹越大
          },
          label: {
            normal: {
              color: "#fff", // 标签文字颜色
              show: true, // 显示标签
              position: "right", // 标签显示位置：散点右侧
              offset: [5, 0], // 标签偏移量：[水平偏移, 垂直偏移]
              formatter: function(params) {
                // 标签文字格式化函数
                return params.data.name; // 显示数据中的name字段
              },
              fontSize: self.$utils.transformFontSize(13), // 标签字体大小
            },
            emphasis: {
              show: true, // 鼠标悬停时显示标签
            },
          },
          symbol: "circle", // 散点符号类型：圆圈
          symbolSize: 8, // 散点大小
          itemStyle: {
            normal: {
              show: true, // 显示散点
              color: self.flyLineColors.bohaiwan, // 散点颜色（黄色，与渤海湾飞线颜色一致）
            },
          },
          data: self.createBohaiwanScatterData(), // 散点数据：渤海湾起点坐标
        },
        {
          // ==================== 各省份终点散点系列 ====================
          type: "effectScatter", // 图表类型：带涟漪效果的散点图
          coordinateSystem: "geo", // 坐标系：地理坐标系
          zlevel: 2, // 图层层级
          silent: true, // 禁用散点系列的交互事件
          rippleEffect: {
            // 涟漪特效配置
            period: 4, // 涟漪动画周期（秒），值越小速度越快
            brushType: "stroke", // 波纹绘制方式：stroke（描边）
            scale: 4, // 波纹圆环最大缩放比例，值越大波纹越大
          },
          label: {
            normal: {
              color: "#fff", // 标签文字颜色
              show: true, // 显示标签
              position: "right", // 标签显示位置：散点右侧
              offset: [5, 0], // 标签偏移量：[水平偏移, 垂直偏移]
              formatter: function(params) {
                // 标签文字格式化函数
                return params.data.name; // 显示数据中的name字段
              },
              fontSize: self.$utils.transformFontSize(13), // 标签字体大小
            },
            emphasis: {
              show: true, // 鼠标悬停时显示标签
            },
          },
          symbol: "circle", // 散点符号类型：圆圈
          symbolSize: 8, // 散点大小
          itemStyle: {
            normal: {
              show: true, // 显示散点
              color: self.flyLineColors.qinzhou, // 散点颜色（青色，与钦州港飞线颜色一致）
            },
          },
          data: self.createScatterData(), // 散点数据：各省份终点坐标
        },
        {
          // ==================== 中间点散点系列 ====================
          type: "effectScatter", // 图表类型：带涟漪效果的散点图
          coordinateSystem: "geo", // 坐标系：地理坐标系
          zlevel: 2, // 图层层级
          silent: true, // 禁用中间点散点系列的交互事件
          rippleEffect: {
            // 涟漪特效配置
            period: 4, // 涟漪动画周期（秒），值越小速度越快
            brushType: "stroke", // 波纹绘制方式：stroke（描边）
            scale: 4, // 波纹圆环最大缩放比例，值越大波纹越大
          },
          label: {
            normal: {
              color: "#fff", // 标签文字颜色
              show: true, // 显示标签
              position: "right", // 标签显示位置：散点右侧
              offset: [5, 0], // 标签偏移量：[水平偏移, 垂直偏移]
              formatter: function(params) {
                // 标签文字格式化函数
                return params.data.name; // 显示数据中的name字段
              },
              fontSize: self.$utils.transformFontSize(13), // 标签字体大小
            },
            emphasis: {
              show: true, // 鼠标悬停时显示标签
            },
          },
          symbol: "diamond", // 散点符号类型：菱形（与其他圆圈区分）
          symbolSize: 0, // 散点大小（比圆圈稍大）
          itemStyle: {
            normal: {
              show: true, // 显示散点
              color: self.flyLineColors.zhongdian, // 散点颜色（橙色，与中间点飞线颜色一致）
            },
          },
          data: self.createZhongdianScatterData(), // 散点数据：中间点坐标
        },
        // ==================== 钦州港起点标记 ====================
        {
          type: "scatter", // 图表类型：散点图
          coordinateSystem: "geo", // 坐标系：地理坐标系
          zlevel: 2, // 图层层级
          silent: true, // 禁用起点散点系列的交互事件
          rippleEffect: {
            period: 4, // 涟漪动画周期
            brushType: "stroke", // 波纹绘制方式：描边
            scale: 4, // 波纹缩放比例
          },
          label: {
            normal: {
              show: true, // 显示起点名称
              position: "top", // 标签位置：散点上方
              color: "#ff0", // 标签颜色：黄色
              formatter: "钦州港", // 标签文字内容
              textStyle: {
                color: "#ff0", // 文字颜色：黄色
                fontSize: self.$utils.transformFontSize(12), // 文字大小
              },
            },
            emphasis: {
              color: "#f60", // 鼠标悬停时文字颜色：橙色
            },
          },
          symbol: "image://" + require("@/assets/images/bsc-map-bj.png"), // 使用图片作为标记符号
          symbolSize: [30, 30], // 图片大小 [宽度, 高度]
          itemStyle: {
            normal: {
              color: "#ff0", // 散点颜色：黄色
            },
          },
          data: [
            {
              name: "钦州港", // 数据点名称
              value: self.qinzhouPortCoords, // 使用钦州港经纬度作为起点坐标
            },
          ],
        },
        // ==================== 渤海湾终点标记 ====================
        {
          type: "scatter", // 图表类型：散点图
          coordinateSystem: "geo", // 坐标系：地理坐标系
          zlevel: 2, // 图层层级
          silent: true, // 禁用渤海湾散点系列的交互事件
          rippleEffect: {
            period: 4, // 涟漪动画周期
            brushType: "stroke", // 波纹绘制方式：描边
            scale: 4, // 波纹缩放比例
          },
          label: {
            normal: {
              show: true, // 显示终点名称
              position: "top", // 标签位置：散点上方
              color: "#ffeb3b", // 标签颜色：亮黄色
              formatter: "坐标111", // 标签文字内容
              textStyle: {
                color: "#ffeb3b", // 文字颜色：亮黄色
                fontSize: self.$utils.transformFontSize(12), // 文字大小
              },
            },
            emphasis: {
              color: "#ffc107", // 鼠标悬停时文字颜色：深黄色
            },
          },
          symbol: "pin", // 使用图钉符号作为标记
          symbolSize: 15, // 图钉大小
          itemStyle: {
            normal: {
              color: self.flyLineColors.bohaiwan, // 散点颜色：亮黄色
            },
          },
          data: [
            {
              name: "渤海湾", // 数据点名称
              value: self.bohaiwanCoords, // 使用渤海湾经纬度作为终点坐标
            },
          ],
        }
      );

      this.option.series = series;
    },
    // ==================== 数据处理方法 ====================

    /**
     * 转换钦州港飞线数据
     * 将钦州港作为起点，各省份作为终点的飞线数据格式化
     * @returns {Array} 飞线数据数组
     */
    convertData() {
      var res = [];
      // 遍历各省份坐标数组
      for (var i = 0; i < this.zbarr.length; i++) {
        var fromCoord = this.zbarr[i]; // 终点坐标：各省份
        // 使用钦州港经纬度作为起点
        var toCoord = this.qinzhouPortCoords;
        // 构建飞线数据格式：[起点坐标对象, 终点坐标对象]
        res.push([
          {
            coord: toCoord, // 起点：钦州港
          },
          {
            coord: fromCoord, // 终点：各个省份
            value: 0, // 数值（可用于控制线条粗细等）
          },
        ]);
      }
      return res;
    },
    /**
     * 创建各省份终点散点数据
     * 将各省份坐标转换为散点图所需的数据格式
     * @returns {Array} 散点数据数组
     */
    createScatterData() {
      var data = [];
      // 遍历各省份坐标数组
      for (var i = 0; i < this.zbarr.length; i++) {
        data.push({
          name: "", // 散点名称（可为空）
          value: this.zbarr[i].concat([0]), // 坐标格式：[经度, 纬度, 数值]
        });
      }
      return data;
    },

    /**
     * 转换中间点飞线数据
     * 处理中间点到钦州港的多段飞线数据，支持二维和三维数组
     * @returns {Array} 飞线数据数组
     */
    convertZhongdianData() {
      var res = [];
      var endPoint = this.qinzhouPortCoords; // 终点：钦州港

      // 检查 zhongdianarr 是否有数据且是数组
      if (this.zhongdianarr.length > 0 && Array.isArray(this.zhongdianarr[0])) {
        // 处理每个中间点路径
        for (var j = 0; j < this.zhongdianarr.length; j++) {
          var path = this.zhongdianarr[j];

          if (Array.isArray(path[0])) {
            // 如果是三维数组 [[116.4551, 40.2539], [117.4551, 41.2539]]
            // 处理多段路径：从第一个中间点开始，经过所有中间点，最终到达钦州港
            for (var i = 0; i < path.length; i++) {
              var currentPoint = path[i]; // 当前点
              var nextPoint = i === path.length - 1 ? endPoint : path[i + 1]; // 下一个点或终点

              res.push([
                {
                  coord: currentPoint, // 起点：当前中间点
                },
                {
                  coord: nextPoint, // 终点：下一个中间点或钦州港
                  value: 0, // 数值
                },
              ]);
            }
          } else {
            // 如果是二维数组 [116.4551, 40.2539]
            // 直接从中间点到钦州港的单段飞线
            res.push([
              {
                coord: path, // 起点：中间点
              },
              {
                coord: endPoint, // 终点：钦州港
                value: 0, // 数值
              },
            ]);
          }
        }
      }

      return res;
    },
    /**
     * 创建中间点散点数据
     * 将中间点坐标转换为散点图所需的数据格式，支持二维和三维数组
     * @returns {Array} 散点数据数组
     */
    createZhongdianScatterData() {
      var data = [];

      // 遍历中间点数组
      for (var j = 0; j < this.zhongdianarr.length; j++) {
        var path = this.zhongdianarr[j];

        if (Array.isArray(path[0])) {
          // 三维数组情况：[[[经度,纬度], [经度,纬度]], ...]
          for (var i = 0; i < path.length; i++) {
            data.push({
              // name: `中间点${j + 1}-${i + 1}`, // 可选：显示中间点名称
              name: "", // 散点名称（为空）
              value: path[i].concat([0]), // 坐标格式：[经度, 纬度, 数值]
            });
          }
        } else {
          // 二维数组情况：[[经度,纬度], ...]
          data.push({
            // name: `中间点${j + 1}`, // 可选：显示中间点名称
            name: "", // 散点名称（为空）
            value: path.concat([0]), // 坐标格式：[经度, 纬度, 数值]
          });
        }
      }

      return data;
    },
    /**
     * 转换渤海湾飞线数据
     * 将渤海湾起点数组转换为指向渤海湾终点的飞线数据
     * @returns {Array} 飞线数据数组
     */
    convertBohaiwanData() {
      var res = [];
      var endPoint = this.bohaiwanCoords; // 终点：渤海湾

      // 遍历渤海湾起点数组
      for (var i = 0; i < this.bohaiwanStartPoints.length; i++) {
        var startCoord = this.bohaiwanStartPoints[i]; // 起点
        // 构建飞线数据格式：[起点坐标对象, 终点坐标对象]
        res.push([
          {
            coord: startCoord, // 起点：渤海湾起点坐标
          },
          {
            coord: endPoint, // 终点：渤海湾
            value: 0, // 数值
          },
        ]);
      }

      return res;
    },

    /**
     * 创建渤海湾起点散点数据
     * 将渤海湾起点坐标转换为散点图所需的数据格式
     * @returns {Array} 散点数据数组
     */
    createBohaiwanScatterData() {
      var data = [];

      // 遍历渤海湾起点数组
      for (var i = 0; i < this.bohaiwanStartPoints.length; i++) {
        data.push({
          name: "", // 散点名称（为空）
          value: this.bohaiwanStartPoints[i].concat([0]), // 坐标格式：[经度, 纬度, 数值]
        });
      }

      return data;
    },

    /**
     * 转换新飞线数据
     * 将新起点转换为指向钦州港的飞线数据
     * @returns {Array} 飞线数据数组
     */
    convertNewFlyLineData() {
      var res = [];
      var endPoint = this.qinzhouPortCoords; // 终点：钦州港
      var startCoord = this.newFlyLineStart; // 起点：新飞线起点坐标

      // 构建飞线数据格式：[起点坐标对象, 终点坐标对象]
      res.push([
        {
          coord: startCoord, // 起点：新飞线起点坐标
        },
        {
          coord: endPoint, // 终点：钦州港
          value: 0, // 数值
        },
      ]);

      return res;
    },
  },
};
</script>

<style lang="scss" scoped>
.map-fly-lines-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible !important; // 允许内容溢出显示
}
.chart {
  width: 120%;
  height: 120%;
  overflow: visible !important; // 允许图表内容溢出
  position: relative;
  z-index: 1;
}
</style>
